<template>
  <div class="food-list">
    <div class="row food">
      <div class="col-md-12">
        <router-link :to="{name:'FoodMsg',query:{id:f.id}}" class="food col-lg-3 col-md-4 col-sm-6 col-xs-12" v-for="f in foods" :key="f.classid">
            <img :src="f.pic" alt="">
            <p>{{f.name}}</p>
        </router-link>
      </div>
      <button class="btn btn-primary form-control" @click="loadMore">显示更多</button>
    </div>
  </div>
</template>
<script>
import { getAllTypes, getFoodsByPage, getFoodDetail, getFoodByKeyWord } from '../services/foods';
export default {
  name: 'FoodList',
  data() {
      return {
          classid: '',
          num: 10,
          start: 0,
          foods:[],
      };
  },
  methods: {
    loadMore() {
      this.classid = this.$route.query.classid; // 获取分类id
      this.start = this.start;
      getFoodsByPage(this.classid,this.start,10)
        .then((res) => {
          this.foods = this.foods.concat(res.data.result.list);
          console.log(this.foods)
          console.log(this.start)
          this.start = this.start + this.num;
        })
    }
  },
  created() {
      this.loadMore();
  },
};
</script>
<style>
.food {
  border: 1px solid #aaa;
  margin: 10px 20px 0px;
  text-align: center;
}
.food img{
  border-radius: 50%;
  box-shadow: 1px 0px 1px;
  margin-bottom: 10px;
}
</style>

